<template>
  <div>
    <div class="operation">
      <a-button @click="addshow" type="primary">
        <template v-slot:icon>
          <icon-plus-circle/>
        </template>
        添加策略
      </a-button>
      <span style="margin: 0 5px;"></span>
      <a-button @click="updatesetting" type="primary" status="warning">
        <template v-slot:icon>
          <icon-edit/>
        </template>
        修改策略
      </a-button>
      <span style="margin: 0 5px;"></span>
      <a-popconfirm content="确定要删除该策略吗？" @ok="deletesetting">
        <a-button type="primary" status="danger">
          <template v-slot:icon>
            <icon-delete/>
          </template>
          删除策略
        </a-button>
      </a-popconfirm>
    </div>
    <div class="search">
      <a-form :model="where" auto-label-width layout="inline">
        <a-form-item label="唯一标识符：">
          <a-input v-model="where.guid" placeholder="输入搜索内容进行搜索..." :allow-clear="true"/>
        </a-form-item>
        <a-form-item label="设置的key：">
          <a-input v-model="where.appkey" placeholder="输入搜索内容进行搜索..." :allow-clear="true"/>
        </a-form-item>
        <a-form-item label="设置的值：">
          <a-input v-model="where.appvalue" placeholder="输入搜索内容进行搜索..." :allow-clear="true"/>
        </a-form-item>
        <a-form-item>
          <a-button status="success" @click="search">
            <template #icon>
              <icon-search/>
            </template>
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>搜索</template>
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <main :style="{'height':divheight-250+'px'}" style="background-color: white;">
      <f_table
          power="策略"
          url="SysSetting/GetSysSetting"
          :where="where"
          :divheight="divheight-250"
          ref="tableinfo"
      >
      </f_table>
    </main>
    <a-modal v-model:visible="addvisible" @cancel="cancel" @ok="addOk" draggable :mask-closable="false" cancel-text="关闭" ok-text="添加" :closable="false" :align-center="true">
      <template #title>添加策略</template>
      <div style="text-align: center" v-if="addvisible">
        <a-form :model="add" ref="formRef">
          <a-form-item field="appkey" label="策略KEY：">
            <a-input v-model="add.appkey" placeholder="请输入KEY"/>
          </a-form-item>
          <a-form-item field="appvalue" label="策略值：">
            <a-input v-model="add.appvalue" placeholder="请输入策略值"/>
          </a-form-item>
          <a-form-item field="appcontent" label="策略描述：">
            <a-textarea v-model="add.appcontent" placeholder="请输入策略描述" :max-length="50" allow-clear show-word-limit />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
    <a-modal v-model:visible="updatevisible" @cancel="updatecancel" @ok="updateOk" draggable :mask-closable="false" cancel-text="关闭" ok-text="添加" :closable="false" :align-center="true">
      <template #title>修改策略</template>
      <div style="text-align: center" v-if="updatevisible">
        <a-form :model="update" ref="updateformRef">
          <a-form-item field="appkey" label="策略KEY：">
            <a-input v-model="update.appkey" placeholder="请输入KEY"/>
          </a-form-item>
          <a-form-item field="appvalue" label="策略值：">
            <a-input v-model="update.appvalue" placeholder="请输入策略值"/>
          </a-form-item>
          <a-form-item field="appcontent" label="策略描述：">
            <a-textarea v-model="update.appcontent" placeholder="请输入策略描述" :max-length="50" allow-clear show-word-limit />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
// 例如：import  《组件名称》  from '《组件路径》 ';

import f_table from "@/components/f-table/f_table.vue";
import {getRequest, postRequest} from "@/utils/Request/NewApiRequest";
import {Message} from "@arco-design/web-vue";

export default {
  name: "PolicySettings",
  components: {f_table},
  data() {
    return {
      updatevisible:false,
      addvisible: false,
      divheight: window.innerHeight,
      where: {
        guid: "",// 唯一标识符
        appkey: "",// 设置的key
        appvalue: "",// 设置的值
      },
      // 添加
      add: {
        appkey: "",// 设置的key
        appvalue: "",// 设置的值
        appcontent: "",// 描述
      },
      // 修改
      update: {
        guid: "",// 标识符
        appkey: "",// 设置的key
        appvalue: "",// 设置的值
        appcontent: "",// 描述
      },
    }
  },
  methods: {
    // 搜索
    search() {
      this.$refs.tableinfo.LoadData()
    },
    // 打开添加的对话框
    addshow() {
      this.add.appkey = ""
      this.add.appvalue = ""
      this.add.appcontent = ""
      this.addvisible = true
    },
    // 关闭添加策略框
    cancel(){
      this.add.appkey = ""
      this.add.appvalue = ""
      this.add.appcontent = ""
      this.addvisible = false
    },
    // 添加策略
    addOk(){
      const _this = this
      if (!_this.add.appkey){
        Message.error({
          id: 'messageerror',
          resetOnHover: true,
          content: "请设置策略的key",
          duration: 2000
        })
        return;
      }
      if (!_this.add.appvalue){
        Message.error({
          id: 'messageerror',
          resetOnHover: true,
          content: "请设置策略的值",
          duration: 2000
        })
        return;
      }
      if (!_this.add.appcontent){
        Message.error({
          id: 'messageerror',
          resetOnHover: true,
          content: "请设置策略的描述",
          duration: 2000
        })
        return;
      }
      postRequest(`SysSetting/AddSysSetting`,_this.add).then(data=>{
        Message.success({
          id: 'messagesuccess',
          resetOnHover: true,
          content: `添加成功！`,
          duration: 2000
        })
        _this.search()
        _this.addvisible = false
      }).catch(err=>{
        _this.addvisible = false
        Message.error({
          id: 'messageerror',
          resetOnHover: true,
          content: err,
          duration: 2000
        })
      })
    },
    // 删除策略
    deletesetting(){
      const _this = this
      _this.$refs.tableinfo.selectRowEvent(row=>{
        getRequest(`SysSetting/DeleteSysSetting?guid=${row.guid}`).then(data=>{
          Message.success({
            id: 'messagsuccess',
            resetOnHover: true,
            content: "删除成功",
            duration: 2000
          })
          _this.search()
        })
      })
    },
    // 修改策略的提示框
    updatesetting(){
      const _this = this
      _this.$refs.tableinfo.selectRowEvent(row=>{
        _this.update = row
        _this.updatevisible = true
      })
    },
    // 关闭修改策略弹框
    updatecancel(){
      this.update = {
        guid: "",// 标识符
        appkey: "",// 设置的key
        appvalue: "",// 设置的值
        appcontent: "",// 描述
      }
    },
    // 保存修改的策略
    updateOk(){
      const _this = this
      if (!_this.update.guid){
        Message.error({
          id: 'messageerror',
          resetOnHover: true,
          content: "未查询到策略唯一编号",
          duration: 2000
        })
        return;
      }
      if (!_this.update.appkey){
        Message.error({
          id: 'messageerror',
          resetOnHover: true,
          content: "请设置策略的key",
          duration: 2000
        })
        return;
      }
      if (!_this.update.appvalue){
        Message.error({
          id: 'messageerror',
          resetOnHover: true,
          content: "请设置策略的值",
          duration: 2000
        })
        return;
      }
      if (!_this.update.appcontent){
        Message.error({
          id: 'messageerror',
          resetOnHover: true,
          content: "请设置策略的描述",
          duration: 2000
        })
        return;
      }
      postRequest(`SysSetting/UpdateSysSetting`,_this.update).then(data=>{
        Message.success({
          id: 'messagesuccess',
          resetOnHover: true,
          content: `添加成功！`,
          duration: 2000
        })
        _this.search()
        _this.updatevisible = false
      }).catch(err=>{
        _this.updatevisible = false
        Message.error({
          id: 'messageerror',
          resetOnHover: true,
          content: err,
          duration: 2000
        })
      })
    }
  },
}
</script>

<style scoped>
.search {
  padding: 10px;
  height: 35px;
  margin-bottom: 10px;
  background-color: white;
}

.operation {
  padding: 10px;
  height: 35px;
  line-height: 35px;
  margin-bottom: 10px;
  background-color: white;
}
</style>